<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2323</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
{ margin:0 auto; width:320px; height:100px; border:1px solid #F00}
	
</style>
<div id="app" class="container" >
    <div class="row clearfix">
        <div class="col-md-12">
            <div class="page-header">
                <h1>
                    <small>订单页面</small>
                </h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 column">
                <span>欢迎来到用户订单</span>
            </div> 
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
						<td>商品编号</td>
						<td>商品名称</td>
						<td>商品单价</td>
						<td>商品数量</td>
						<td>总费用(元)</td>
						<td>商品种类</td>
                </tr>
                </thead>
                <tbody>
               
                    <tr v-for="salar in salaArray">
							<td>{{salar.id}}</td>
							<td>{{salar.commodityName}}</td>
							<td>{{salar.commodityPrice}}</td>
							<td>{{salar.amount}}</td>
							<td>{{salar.totalprice}}</td>
							<td>{{salar.commodityCatogory}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
	<div class="row">
	<div class="col-md-4 column" style="text-align: center;display: block; margin: 0 auto; height: 50%;width: 50%;">
	    <form  style="float:right" class="form-inline">
	        <span style="color:red;font-weight: bold"></span>
			<a  class="btn btn-primary" v-bind:href="'orderList1.html'">返回主界面</a>
	    </form>
	</div> 
	</div>
	
</div>
</body>
<script src="assets/js/vue.js"></script>
		<script src="assets/js/axios.min.js"></script>
		<script src="assets/js/const.js"></script>
		<script>
			var config = {
					"el": "#app",
					"data": {
						"salas":[],
						"salaArray":[]
					},
					"methods": {
						"selectsalaAll": function() {
							var serverUrl = baseUrl + "/salesrecord/selectAll";
							console.log(serverUrl);
							axios.get(serverUrl)
								.then(function(response) {
									// window.alert("成功");
									var serverResult = response.data;
									//serverResult有三个属性，分别是code ,msg,data
									var salalist = serverResult.data;
									//把服务器返回的集合放到data中的categoryArray;
									//在then中的访问data中的变量,加this.vue
									this.vue.salaArray = salalist;
								})
								.catch(function(response) {
									window.alert("失败");
								})
						},
						"bianli":function(items){
// /salesrecord/insert?amount=1&commodityCatogory=%E6%B0%B4%E6%9E%9C&commodityId=2&commodityName=%E5%B0%8F%E8%8B%B9%E6%9E%9C&commodityPrice=1&customerId=1&datatime=123456&totalprice=1
											
							items.forEach(item => {
								var serverUrl=baseUrl+"/salesrecord/insert?"
								+"amount="+item.amount
								+"&commodityCatogory="+item.commodityCategory
								+"&commodityId="+item.commodityId
								+"commodityName="+item.commodityName
								+"&commodityPrice="+item.commodityPrice
								+"&customerId="+item.customerId
								+"&datatime="+null
								+"&totalprice="+item.cost;
								console.log(serverUrl)
							});																
						},
						"getSessionOrder":function(){
							this.salas  =  JSON.parse(window.sessionStorage.getItem('order'));
						}
					},
					"mounted": function() {
						//window.alert("wakk");
						// var parameter =location.search;
						// var strArray =parameter.split("=");//字符串切割
						// var items =strArray[1];
						// console.log(items);
						this.bianli(this.salas);
						console.log(this.salas);
						this.selectsalaAll();
					}
				};
				var vue = new Vue(config);
		</script>
</html>
